<template>
  <div>
    <el-scrollbar :style="getStyle">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover"
                   class="mgb20"
                   :body-style="heightOne">
            <div class="user-info">
              <img src="../../assets/img/img.jpg"
                   class="user-avator"
                   alt />
              <div class="user-info-cont">
                <div class="user-info-name">{{name}}</div>
                <div>{{role}}</div>
              </div>
            </div>
            <div class="user-info-list">
              上次登录时间：
              <span>{{lastLoginTime}}</span>
            </div>
            <div class="user-info-list">
              上次登录地点：
              <span>{{lastLoginAddress}}</span>
            </div>
          </el-card>

        </el-col>

      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
import Schart from 'vue-schart'
import { getUserInfo } from '@/api/back/system'
export default {
  name: 'dashboard',
  data () {
    return {
      user: this.$backutils.user(),
      lastLoginTime: '',
      lastLoginAddress: ''
    }
  },
  components: {
    Schart
  },
  computed: {
    role () {
      return this.user.username === 'admin' ? '超级管理员' : '普通用户'
    },
    name () {
      return this.user.username
    }

  },
  deactivated () {
  },
  methods: {
    //  获取用户信息
    async getUserInfo () {
      getUserInfo('/system/loginlog/get/' + this.user.id, '', 'get', 'core').then(res => {
        if (res.code === 200) {
          this.lastLoginTime = res.data.loginTime
          this.lastLoginAddress = res.data.loginAddress
        }
      })
    }
  },
  mounted () {
    this.getUserInfo()
  }

}
</script>

<style scoped>
.el-row {
  margin-top: 5px;
  margin-left: 10px;
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 5px;
}

.user-avator {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}
</style>
